<!DOCTYPE html>
<html>
<head>
    <title>Phase Diagram</title>
</head>
<body>
<canvas id="phaseDiagramCanvas" width="450" height="400" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('phaseDiagramCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings to emulate the hand-drawn look
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';
    const baseFont = "24px 'Times New Roman'";
    const varFont = "italic " + baseFont;
    const subscriptFont = "16px 'Times New Roman'";
    const italicSubscriptFont = "italic " + subscriptFont;

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Define coordinate system parameters
    const originX = 70;
    const originY = 300;
    const plotWidth = 250;
    const plotHeight = 220;

    const axisTopY = originY - plotHeight - 40; // Y-coordinate for the top of the H-axis
    const axisRightX = originX + plotWidth + 40; // X-coordinate for the right of the T-axis

    // Key points on the axes
    const H0_x = originX;
    const H0_y = originY - plotHeight;

    const Tc_x = originX + plotWidth;
    const Tc_y = originY;

    // --- Drawing starts here ---

    // 1. Draw Axes
    ctx.beginPath();
    // H-axis (vertical)
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX, axisTopY);
    // Arrowhead for H-axis
    ctx.moveTo(originX, axisTopY);
    ctx.lineTo(originX - 6, axisTopY + 12);
    ctx.moveTo(originX, axisTopY);
    ctx.lineTo(originX + 6, axisTopY + 12);

    // T-axis (horizontal)
    ctx.moveTo(originX, originY);
    ctx.lineTo(axisRightX, originY);
    // Arrowhead for T-axis
    ctx.moveTo(axisRightX, originY);
    ctx.lineTo(axisRightX - 12, originY - 6);
    ctx.moveTo(axisRightX, originY);
    ctx.lineTo(axisRightX - 12, originY + 6);
    ctx.stroke();

    // 2. Draw Ticks and Labels on Axes
    // H-axis label
    ctx.font = varFont;
    ctx.fillText('H', originX, axisTopY - 15);

    // H₀ label
    ctx.textAlign = 'right';
    ctx.fillText('H', originX - 12, H0_y);
    ctx.font = subscriptFont;
    ctx.fillText('0', originX - 5, H0_y + 10);

    // T-axis label
    ctx.font = varFont;
    ctx.textAlign = 'center';
    ctx.fillText('T', axisRightX + 15, originY);

    // T_c label
    ctx.textBaseline = 'top';
    ctx.fillText('T', Tc_x, originY + 10);
    ctx.font = italicSubscriptFont;
    ctx.textAlign = 'left';
    ctx.fillText('c', Tc_x + 8, originY + 18);
    ctx.textAlign = 'center'; // Reset alignment
    ctx.textBaseline = 'middle'; // Reset baseline

    // 3. Draw Phase Boundary Curve
    // The curve is H_c(T) = H_0 * [1 - (T/T_c)^2], a parabola.
    // We use a quadratic Bezier curve. The tangent at (0, H₀) is horizontal.
    // The control point must have the same y-coordinate as H₀.
    // The slope calculation gives an x-coordinate for the control point.
    const controlPointX = originX + (Tc_x - originX) * 0.5; // Approximation for good visuals and physics
    ctx.beginPath();
    ctx.moveTo(H0_x, H0_y);
    ctx.quadraticCurveTo(controlPointX, H0_y, Tc_x, Tc_y);
    ctx.stroke();

    // 4. Draw Phase Region Labels
    // S phase region (inside the curve)
    ctx.font = baseFont;
    ctx.fillText('S phase', originX + 100, originY - 120);
    ctx.font = varFont;
    ctx.fillText('B = 0', originX + 100, originY - 80);

    // N phase region (outside the curve)
    ctx.font = baseFont;
    ctx.fillText('N phase', originX + 220, originY - 180);
    ctx.font = varFont;
    ctx.fillText('B ≠ 0', originX + 220, originY - 140); // ≠ is Unicode u2260

    // 5. Draw Figure Caption
    ctx.font = baseFont;
    ctx.fillText('Fig. 1.41.', canvas.width / 2, canvas.height - 25);

</script>
</body>
</html>